CSS속성_vertical-align(버티컬얼라인)

css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다.

그 중 vertical-align 속성을 이용하여 수직 정렬을 할 수 있습니다.

이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다.

따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다.

 

vertical-align 속성

요소의 수직 정렬을 지정하는 속성입니다. (인라인레벨요소에 적용 가능)

 

속성값(기본값:baseline)

1. length : 요소의 길이만큼 올리거나 내리며 음수 값도 사용 가능합니다. (px값 사용 시 baseline을 기준으로 이동)

2. % : 요소를 line-height 기준으로 이동하며 음수 값 사용 가능합니다.

3. 키워드 : baseline, sub, super, top, text-top, middle, bottom, text-bottom

 

baseline은 소문자 x를 기준으로 하단 라인을 의미합니다. 부모요소의 기준 선에 맞춤.

sub 부모 아래 첨자 기준으로 정렬

super : 부모 위 첨자 기준으로 정렬 

text-top : 요소의 맨 위를 부모 font의 맨 위(Ascender 제외)에 맞춤.

text-bottom : 요소의 맨 아래를 부모 font의 맨 아래(Descender 제외)에 맞춤. 

middle : 부모의 중앙에 위치. 소문자x를 기준으로 중앙에 정렬.

top : 요소의 맨위를 줄에서 가장 큰 요소의 맨 위 위치에 맞춤.

bottom : 요소의 맨 아래를 줄에서 가장 낮은 요소에 맞춤.

 

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align